<template>
    <div class="xin">
        <div class="logo"></div>
        <div class="ipt">
            <el-input v-model="SearchInput" class="w-50 m-2" placeholder='搜索商品、专辑、盲盒' :prefix-icon="Search"
                :input-style="InputStyle" @focus="InputFocus" @blur="InputBlur" @input="SearchFunction" />
            <div class="goods" v-show="!NavShowTag">
                <ul v-show="Goods.length">
                    <li v-for="(item, index) in Goods" :key="'goods' + index" @mouseenter="Enter(item)"
                        @mouseleave="Leave(item)" :style="item.bgColor">
                        <router-link :to="`/detail/${item.id}`" style="display: block;">{{ item.name }}</router-link>
                        <!-- 搜索到的链接跳转 -->
                    </li>
                </ul>
            </div>
        </div>
        <ul v-show="NavShowTag" class="navul">
            <li v-for="(item, index) in myNav" :key="'nav' + index" :title="item.name">
                <router-link :to="item.route ? item.route : 'index'"
                    :style="item.route == routeNow ? 'color:blue' : 'color:black'">{{ item.name }}</router-link>
            </li>
        </ul>
        <el-button type="primary" round @click="$router.push('/login')" v-if="!userId">登录</el-button>
        <router-link to="/account" v-if="userId">{{ userId }}</router-link>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted,computed } from 'vue'
import { useStore } from 'vuex';
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { getShopList } from '../api/api';

//搜索框
const SearchInput = ref('')
//nav导航
const myNav = ref(
    [
        {
            name: '首页',
            route: '/index'
        },
        {
            name: '新品',
            route: '/list'
        },
        {
            name: '盲盒',
            route: ''
        },
        {
            name: '市场',
            route: ''
        },
        {
            name: '元宇宙',
            route: ''
        },
        {
            name: '我的',
            route: '/account'
        },
        {
            name: '公告',
            route: '/notice'
        },
        {
            name: '谣言曝光',
            route: ''
        },
        {
            name: '新闻中心',
            route: ''
        },
        {
            name: '下载app',
            route: ''
        },
    ]
)
//导航条是否显示
const NavShowTag = ref(true)
//搜索框默认样式
const InputStyle = ref('width:230px;height:40px;margin-left:10px')
//搜索框获取焦点样式修改
const InputFocus = () => {
    InputStyle.value = 'width:800px;height:40px;margin-left:10px'
    NavShowTag.value = false
}
//搜索框失去焦点样式修改
const InputBlur = () => {
    setTimeout(() => {
        InputStyle.value = 'width:230px;height:40px;margin-left:10px'
        NavShowTag.value = true
    }, 100)
}
//监听当前路由
const Router = useRouter()//实例化路由对象
const routeNow = ref('')//储存当前路由路径
watch(
    () => Router,
    (newValue, oldValue) => {
        routeNow.value = newValue.currentRoute.value.fullPath
    },
    { immediate: true }
)

// 用网络请求代替假数据
onMounted(async () => {
    let res: any = await getShopList()
    console.log(res);
    GoodsName.value = res.data.data.map((item: any) => {
        return {
            id: item._id,
            name: item.shopName
        }
    })
}

)








const GoodsName = ref<any>([])//商品名字数据



interface goodts {
    id: string;
    name: string;
    bgColor: string;
}

const Goods = ref<goodts[]>([])//响应到页面的数据
const SearchFunction = () => {
    Goods.value = []
    if (SearchInput.value) {

        for (let a = 0; a < GoodsName.value.length; a++) {
            if (GoodsName.value[a].name.indexOf(SearchInput.value) >= 0) {
                Goods.value.push({
                    id: GoodsName.value[a].id,
                    name: GoodsName.value[a].name,
                    bgColor: 'background-color:#fff'
                })
            }
        }
    }
}
const Back = ref(false)
//鼠标移入事件
const Enter = (item: goodts) => {
    item.bgColor = 'background-color:#dfffff'

}
//鼠标移出事件
const Leave = (item: goodts) => {
    item.bgColor = 'background-color:#fff'

}



//实例化vuex
let store = useStore()

const userId = ref(computed(()=>store.state.Name))

</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: black;
}

.xin {
    width: 1200px;
    height: 80px;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: space-between;

    .logo {
        width: 158px;
        height: 54px;
        background-image: url(https://www.ibox.art/zh-cn/static/img/4d37743.v1669810212431.png);
    }

    .navul {
        list-style: none;
        display: flex;
        margin-left: 30px;

        li {
            padding: 0 10px;
        }
    }

    div {
        .goods {
            width: 853px;
            margin-left: 10px;

            ul {
                list-style: none;
                border: 1px solid #6fb6ff;
                border-top: 0;
                width: 853px;
                position: absolute;
                z-index: 99999;

                li {
                    font: 200 16px/40px '';
                    height: 40px;
                }
            }
        }
    }
}
</style>